<template>
  <view :id="id" class="mxp-line-progress" :style="cusStyle">
    <view
      class="progress-background"
      :style="[
        {
          backgroundColor: inactiveColor,
          height,
        },
      ]"
    ></view>
    <view class="progress" :style="[progressStyle]">
      <slot>
        <text v-if="showText && percentage >= 10" class="text" :style="textStyle">{{ newPercentage + '%' }}</text>
      </slot>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { type CSSProperties, type PropType, computed, getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue';
  import type { $AllColorStr, $SizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';
  import { publicStyeProps } from '../mxp-tool/utils/public-props';
  import { getDomSize } from '../mxp-tool/utils/dom';
  import { getOnlyID } from '../mxp-tool/utils/common';
  defineOptions({
    name: 'mxp-progress-bar',
  });
  const props = defineProps({
    /** 激活部分的颜色 */
    activeColor: { type: String as PropType<$AllColorStr>, default: '#67C23A' },
    /** 未激活的颜色 */
    inactiveColor: { type: String as PropType<$AllColorStr>, default: '#ececec' },
    /** 进度百分比 */
    percentage: { type: Number, default: 0 },
    /** 是否在进度条内部显示百分比的值 */
    showText: { type: Boolean, default: true },
    /** 进度条的高度 */
    height: { type: String as PropType<$SizeUnitStr>, default: '12px' },
    /** w文本的样式 */
    textStyle: { type: Object as PropType<CSSProperties>, default: () => ({}) },
    ...publicStyeProps,
  });
  defineSlots<{
    /** 自定义内容 */
    default: () => void;
  }>();
  const lineWidth = ref<$SizeUnitStr>('0px');
  const id = getOnlyID('mxp-line-progress');

  const progressStyle = computed<CSSProperties>(() => {
    return { width: lineWidth.value, backgroundColor: props.activeColor, height: props.height };
  });

  const newPercentage = computed(() => {
    return Math.round((props.percentage > 100 ? 100 : props.percentage < 0 ? 0 : props.percentage) * 100) / 100;
  });

  onMounted(() => {
    nextTick(() => {
      resizeProgressWidth();
    });
  });
  watch(
    () => props.percentage,
    () => {
      resizeProgressWidth();
    }
  );
  const instance = getCurrentInstance();

  /** 进度 */
  function resizeProgressWidth() {
    getDomSize(`#${id}`, instance).then((size) => {
      const { width } = size;
      // 通过设置的percentage值，计算其所占总长度的百分比
      lineWidth.value = `${(width! * newPercentage.value) / 100}px`;
    });
  }
</script>

<style lang="scss" scoped>
  .mxp-line-progress {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    border-radius: 100px;

    .progress-background {
      flex: 1;
      background-color: #ececec;
      border-radius: 100px;
    }

    .progress {
      position: relative;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      border-radius: 100px;
      transition: width 0.5s ease;
    }

    .text {
      align-items: center;
      margin-right: 5px;
      font-size: 12px;
      line-height: 12px;
      color: #ffffff;
      text-align: right;
      transform: scale(0.9);
    }
  }
</style>
